<template>
  <div class="upload">
    <el-upload
      :action="uploadImgUrl"
      :class="noneBtnImg"
      ref="upload"
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      :on-exceed="handleExceed"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :headers="headers"
      multiple
    >
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">
        <p>1、上传图片只能是 JPG/PNG 格式!</p>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";

  export default {
    props: {
      close: Boolean,
      value: {
        type: String,
        default: '',
      },
      limit: {
        type: Number,
        default: 5,
      },
      //每次初始化时候获取到的url
      picArr:{
        type: Array,
        default:[]
      }
    },
    watch: {
      close: {
        handler(newValue, oldValue) {
          //debugger

          if(newValue == true){
            this.fileList= []
            this.formDate = new FormData()
            this.$emit("formDate", 'close');
          }
        },
        picArr: {
          handler(newValue, oldValue) {
            //debugger
            this.fileList = this.newValue;
          }
        },
        deep: true
      }
    },
    data() {
      return {
        fileList: [],
        formDate: new FormData(),
        isbandel: false,
        dialogVisible: false,
        dialogImageUrl: "",
        noneBtnImg: false,
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址

        headers: {
          Authorization: "Bearer " + getToken(),
        },
      };
    },
    mounted() {
      // let _this=this;
      // this.fileList= []
      this.isbandel = false
      this.dialogImageUrl = ''
      this.noneBtnImg= false,
      this.dialogVisible = false
      this.formDate = new FormData()
    },
    created() {
      this.fileList = this.picArr;
    },

    methods: {
      // 文件个数超出
      handleExceed() {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
      },

      uploadFile(file) {
        this.formDate.append("file", file.file);
        this.$emit("formData", file);
      },
      //查看大图
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      // 文件删除操作
      handleRemove(file, fileList) {
        // debugger
        this.fileList = [];
        this.fileList = fileList;
        this.noneBtnImg = fileList.length >= 6;
        this.formDate = new FormData();
        this.fileList.forEach(item => {
          this.formDate.append("file", item.raw);
        });
        if (file.raw && file.response.code == 200){
          this.$emit('removeADPic',file.response.url)
          return;
        }
        // return
        this.$emit("removeADPic", file.url);
      },
      //上传图片之前判断图片大小及格式
      beforeAvatarUpload(file) {
        const isJPG = ["image/png", "image/jpeg", "image/jpg"].indexOf(file.type) == -1 ? 0 : 1;
        const isLt10M = file.size / 1024 / 1024 < 5;
        // const isLt20 = file.name.length < 10;
        if (!isJPG) {
          this.$message.error("上传图片格式必须是,jpeg,jpg,png中的一种");
          return false;
        }
        if (!isLt10M) {
          this.$message.error("上传图片大小不能超过 5MB!");
          return false;
        }
        // if (!isLt20) {
        //   this.$message.error("上传文件名称长度必须要小于10个文字!");
        //   return false;
        // }
        this.loading = this.$loading({
          lock: true,
          text: "上传中",
          background: "rgba(0, 0, 0, 0.7)",
        });
      },
      // 上传成功
      handleUploadSuccess(res) {

        this.$emit("uploadADPic", res.url);
        this.loading.close();
      },
      handleBeforeUpload() {
        this.loading = this.$loading({
          lock: true,
          text: "上传中",
          background: "rgba(0, 0, 0, 0.7)",
        });
      },
      handleUploadError() {
        this.$message({
          type: "error",
          message: "上传失败",
        });
        this.loading.close();
      }
    },

  };
</script>

<style lang="scss" scoped>
  /*.disUoloadSty /deep/ */
  .el-upload--picture-card {
    display: none; /* 上传按钮隐藏 */
  }
  .el-upload__tip {
    line-height: 20px;
  }
  .image {
    position: relative;

    .mask {
      opacity: 0;
      position: absolute;
      top: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      transition: all 0.3s;
    }

    &:hover .mask {
      opacity: 1;
    }
  }
</style>
